<template>
  <div>
    <el-dialog width="500px" title="编辑规格" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="规格名称：" prop="spec_name">
          <el-input v-model="ruleForm.spec_name" placeholder="最多6个字符" />
        </el-form-item>
        <el-form-item label="选择分类：" prop="first_cate_id">
          <el-select v-model="ruleForm.first_cate_id" multiple placeholder="请选择" style="width: 360px" @change="handleChange">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.kind_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="可选值：" prop="spec">
          <el-input v-model="content" placeholder="请输入内容" clearable>
            <template slot="append"><span @click="add">添加</span></template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.spec.length">
          <template>
            <div class="spec-container">
              <div v-for="(item, index) of ruleForm.spec" :key="index" class="choose-box">
                <div class="box-wrapper">
                  <span>{{ item }}</span>
                  <i class="el-icon-close" @click="deleteSpecItem(index)" />
                </div>
              </div>
            </div>
          </template>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getcategoryList, addOrEditPropItem, getPropDetail } from '@/api/prop'
const ERR_OK = 200
export default {
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      content: '',
      data: '',
      ruleForm: {
        spec_name: '',
        first_cate_id: [],
        spec: []
      },
      categoryList: [],
      rules: {
        spec_name: [
          { required: true, message: '请输入规格名称', trigger: 'blur' },
          { min: 1, max: 6, message: '最多6个字符', trigger: 'blur' }
        ],
        first_cate_id: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        spec: [
          { required: true, message: '请添加可选值', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    id(newVal) {
      this.ruleForm.id = newVal
      this._getPropDetail(newVal)
        .then((res) => {
          this.categoryList = res.data.kinds
          this.ruleForm.spec_name = res.data.data.spec_kind_name
          this.ruleForm.first_cate_id = res.data.data.commodityFirstCateIdArr
          res.data.lower.forEach((item, index) => {
            this.ruleForm.spec.push(item.spec_name)
          })
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created() {
    this._getcategoryList()
  },
  methods: {
    handleClose(done) {
      done()
    },
    handleChange(value) {
      this.ruleForm.first_cate_id = value
    },
    confirm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this._addOrEditPropItem(this.ruleForm)
            .then(() => {
              this.$emit('submitComplete')
            })
          this.dialogVisible = false
          this.clear()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clear() {
      this.ruleForm = {
        spec_name: '',
        first_cate_id: [],
        spec: []
      }
      this.content = ''
    },
    add() {
      const fIndex = this.ruleForm.spec.findIndex((item, index) => {
        return item === this.content
      })
      if (fIndex >= 0) {
        this.ruleForm.spec.splice(fIndex, 1)
      }
      this.ruleForm.spec.push(this.content)
    },
    deleteSpecItem(index) {
      this.ruleForm.spec.splice(index, 1)
    },
    show() {
      this.dialogVisible = true
    },
    _getcategoryList() {
      getcategoryList()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.categoryList = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _addOrEditPropItem({ id, first_cate_id, spec, spec_name }) {
      return new Promise((resolve, reject) => {
        addOrEditPropItem({ id, first_cate_id, spec, spec_name })
          .then(res => {
            if (res.code === ERR_OK) {
              this._success(res.data)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _getPropDetail(id) {
      return new Promise((resolve, reject) => {
        getPropDetail(id)
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this.data = res.data
              resolve(res)
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _success(res) {
      this.$message({
        type: 'success',
        message: res.meassage,
        showClose: true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.spec-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.choose-box {
  display: inline-block;
  border: 1px solid #eee;
  font-size: 0;
  height: 30px;
  margin-right: 10px;
  margin-bottom: 10px;
  .box-wrapper {
    display: flex;
    align-items: center;
    span {
      flex: 1;
      padding: 3px 8px;
      display: inline-block;
      line-height: 24px;
      color: rgba(16, 16, 16, 1);
      font-size: 12px;
      text-align: center;
      font-family: Roboto;
      vertical-align: top;
      background: #eaf4ff;
    }
    i {
      font-size: 12px;
      color: #bbbbbb;
      padding: 5px;
    }
  }
}
</style>
